<template>
    <el-table @filter-change="filterChange" :spanMethod="spanMethod" :data="tableData" :border="border" :stripe="stripe" :size="size" :height="height" :max-height="maxHeight"
        :row-key="rowKey" @selection-change="handleSelectionChange" @row-click="handleRowClick" :header-cell-style="headerCellStyle" :cell-style="cellStyle">
        <template v-for="column in columns" :key="column.prop">
            <el-table-column :filter-multiple="false" :prop="column.prop" :label="column.label" :width="column.width"
                :min-width="column.minWidth" :type="column.type" :sortable="column.sortable"
                :formatter="column.formatter" :align="column.align" :header-align="column.headerAlign"
                :filters="column.filters"  filter-placement="bottom-end" :column-key="column.prop"
                >
                <template v-if="column.slot" #default="scope">
                    <slot :name="column.slot" :row="scope.row"></slot>
                </template>
            </el-table-column>
        </template>
    </el-table>
</template>

<script setup>
import { defineProps, defineEmits } from 'vue';

const props = defineProps({
    tableData: {
        type: Array,
        required: true,
    },
    columns: {
        type: Array,
        required: true,
    },
    border: {
        type: Boolean,
        default: false,
    },
    stripe: {
        type: Boolean,
        default: false,
    },
    size: {
        type: String,
        default: 'default',
    },
    height: {
        type: [String, Number],
        default: null,
    },
    maxHeight: {
        type: [String, Number],
        default: null,
    },
    rowKey: {
        type: String,
        default: 'id',
    },
    headerCellStyle:{
        type:Object,
        default: {},
    },
    cellStyle:{
        type:Object,
        default: {},
    },
    spanMethod:{
        type:Function,
        default: ()=>{},
    }
});

const emit = defineEmits(['selection-change', 'row-click']);

const handleSelectionChange = (selection) => {
    emit('selection-change', selection);
};

const handleRowClick = (row, column, event) => {
    emit('row-click', row, column, event);
};
const filterChange = (value)=>{
    emit('filterChange',value)
}
</script>

<style scoped></style>